<template>
  <div>
    <el-form
      :model="tableData"
      :rules="rules"
      ref="tableData"
      label-width="100px"
      class="demo-tableData"
    >
      <el-form-item label="文章封面图">
        <el-upload
          class="avatar-uploader"
          :action="host"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
        >
          <img
            v-if="tableData.avatar"
            :src="dialogFormAvatarFullUrl"
            class="avatar"
          />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="文章分类" prop="ArticlesClassify">
        <el-select v-model="tableData.ArticlesClassify" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="文章标题" prop="ArticlesTitle">
        <el-input
          v-model="tableData.ArticlesTitle"
          style="width: 50%"
        ></el-input>
      </el-form-item>

      <el-form-item label="文章简介" prop="ArticleSynopsis">
        <el-input
          v-model="tableData.ArticleSynopsis"
          style="width: 50%"
        ></el-input>
      </el-form-item>
      <div id="demo1"></div>

      <el-form-item label="" prop="ArticlesContent">
        <el-input
          style="width: 50%"
          type="hidden"
          :autosize="{ minRows: 5, maxRows: 20 }"
          placeholder="请输入内容"
          v-model="tableData.ArticlesContent"
        >
        </el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('tableData')"
          >立即发表</el-button
        >
        <el-button @click="resetForm('tableData')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import wangEditor from "wangeditor";
import { addArticles } from "../api/articles";
import { getUserId } from "../Utils/auth";
export default {
  data() {
    return {
      //图片处理
      host: this.$host + "picture/article",
      tableData: {
        FromUsersId: "",
        ArticlesTitle: "",
        ArticleSynopsis: "",
        ArticlesContent: "",
        ArticlesClassify: "",
        avatar: "",
      },
      dialogFormAvatarFullUrl: "",

      options: [
        {
          value: "普通文章",
        },
        {
          value: "新闻实事",
        },
        {
          value: "公司动态",
        },
        {
          value: "大神风采",
        },
      ],
      rules: {
        ArticlesTitle: [
          { required: true, message: "请输入文章标题", trigger: "blur" },
          {
            min: 1,
            max: 50,
            message: "长度在 1 到 20 个字符",
            trigger: "blur",
          },
        ],
        ArticleSynopsis: [
          { required: true, message: "请输入文章简介", trigger: "blur" },
          {
            min: 0,
            message: "长度在 5 到 50 个字符",
            trigger: "blur",
          },
        ],
        ArticlesClassify: [
          { required: true, message: "文章分类不能为空", trigger: "blur" },
        ],

        ArticlesContent: [
          { required: true, message: "请输入文章内容", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.tableData.FromUsersId = getUserId();

          console.log(this.tableData);
          addArticles(this.tableData).then((data) => {
            if (data.data.code === 1000) {
              this.$message({ type: "success", message: data.data.msg });
              this.$router.push("/Layout/content");
              // console.log(data);
            } else {
              this.$message({ type: "error", message: data.data.msg });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    // 头像上传成功后的处理
    handleAvatarSuccess(res, file) {
      console.log(res);
      // 保存相对路径
      let prePath = res.filesPath;
      this.tableData.avatar = prePath;

      // 显示使用完整路径
      let fullPath = URL.createObjectURL(file.raw);
      this.dialogFormAvatarFullUrl = fullPath;
    },
  },

  mounted() {
    // this.fetchData();
    // this.fetchData(this.article /* 这个 */);
    //富文本编辑器
    const editor = new wangEditor(`#demo1`);
    //上传图片
    editor.config.uploadImgServer = this.$host + "picture/uploadWangEditor";

    //配置onchange回调函数
    editor.config.onchange = (newHtml) => {
      this.editorData = newHtml;
      this.tableData.ArticlesContent = this.editorData;
    };
    editor.create();
    this.editor = editor;
  },
};
</script>

<style scoped>
.el-input__inner {
  width: 500px;
}

/* 这下面是图片的样式，虽然我不知道是什么，但是用就对了 */
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>